<script setup lang="ts">

import { random } from 'lodash-es'
import ActiveUsersBar from './components/ActiveUsersBar.vue'
import VersionInformationCard from '/@/views/home/index/components/VersionInformationCard.vue'
import RecommendationCard from '/@/views/home/index/components/RecommendationCard.vue'
import DevelopCard from '/@/views/home/index/components/DevelopCard.vue'
import AuthorizationCard from '/@/views/home/index/components/AuthorizationCard.vue'

defineOptions({
  name: 'homeIndex'
})

const countConfig1 = reactive<any>({
  startValue: 0,
  endValue: random(1000, 20000),
  decimals: 2,
  prefix: '￥',
  suffix: '',
  separator: ',',
  duration: 8000
})
</script>

<template>
  <div class="page-container">
    <el-row :gutter="10">
      <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
        <PageHeaderCard />
      </el-col>

      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
        <HomeTopCard background="blue"
                     :count-config="countConfig1"
                     icon="money-cny-circle-line"
                     percentage="10%"
                     title="总销量">
        </HomeTopCard>
      </el-col>

      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
        <HomeTopCard background="white"
                     percentage="30%"
                     title="活跃用户">
          <template #tag>
            <el-tag type="danger">日</el-tag>
          </template>
          <template #chart>
            <ActiveUsersBar />
          </template>
        </HomeTopCard>
      </el-col>
      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
        <HomeTopCard icon="money-cny-box-line"
                     percentage="44%"
                     title="总成交">
        </HomeTopCard>
      </el-col>
      <el-col :lg="6" :md="12" :sm="24" :xl="6" :xs="24">
        <HomeTopCard icon="passport-line"
                     percentage="10%"
                     title="订单">
        </HomeTopCard>
      </el-col>

      <el-col :lg="12" :md="24" :sm="24" :xl="12" :xs="24">
        <PendingCard />
      </el-col>
      <el-col :lg="12" :md="24" :sm="24" :xl="12" :xs="24">
        <VersionInformationCard />
      </el-col>

      <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
        <RecommendationCard />
      </el-col>

      <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
        <DevelopCard />
      </el-col>
      <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
        <AuthorizationCard />
      </el-col>

    </el-row>
  </div>
</template>

<style scoped lang="scss">

:deep() {
  .el-card {
    .el-card__header {
      position: relative;
      height: 45px !important;
      display: flex;
      align-items: center;
      font-weight: 500;

      [class*='ri-'] {
        background: linear-gradient(120deg, #bd34fe 30%, var(--el-color-primary));
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }

      .card-header-tag {
        position: absolute;
        right: var(--el-margin);
      }

      i {
        margin-right: 3px;
      }

      //div > span {
      //  display: flex;
      //  align-items: center;
      //
      //  i {
      //    margin-right: 3px;
      //  }
      //}
    }

    //.el-card__body {
    //  position: relative;
    //
    //  .echarts {
    //    width: 100%;
    //    height: 127px;
    //  }
    //
    //  .card-footer-tag {
    //    position: absolute;
    //    right: var(--el-margin);
    //    bottom: 15px;
    //  }
    //}
  }
}

</style>
